<template>
  <div id="app">
    <!-- Sidebar -->
    <div class="sidebar">
      <div class="logo">
        <img src="./assets/logo.png" alt="Logo" class="logo-image" />
      </div>
      <ul>
        <li>数据概况</li>
        <li>教务管理</li>
        <li>线下课程</li>
        <li>订单管理</li>
        <li>客户管理</li>
        <li>门店管理</li>
        <li>线上课程</li>
      </ul>
    </div>

    <!-- Main Content -->
    <div class="main-content">
      <div class="header">
        <h2>教室管理</h2>
        <input v-model="searchQuery" placeholder="请输入教室名称搜索" class="search-input" />
        <button class="create-room-button">新建教室</button>
      </div>

      <!-- 教室管理表格 -->
      <table class="table">
        <thead>
        <tr>
          <th>教室名称</th>
          <th>容纳人数</th>
          <th>所属校区</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(classroom, index) in filteredClassrooms" :key="index">
          <td>{{ classroom.name }}</td>
          <td>{{ classroom.capacity }}</td>
          <td>{{ classroom.campus }}</td>
          <td>{{ classroom.creationDate }}</td>
          <td>
            <button @click="deleteClassroom(index)">删除</button>
          </td>
        </tr>
        </tbody>
      </table>

      <!-- 分页控制 -->
      <div class="pagination">
        <button @click="previousPage" :disabled="page <= 1">上一页</button>
        <span>第 {{ page }} 页</span>
        <button @click="nextPage" :disabled="page >= totalPages">下一页</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      classrooms: [
        { name: '教室11', capacity: 20, campus: '湖里一号店', creationDate: '2019.5.18'},
        {name: '教室12', capacity: 20, campus: '湖里一号店', creationDate: '2019.5.18'},
        {name: '教室13', capacity: 20, campus: '湖里一号店', creationDate: '2019.5.18'},
      ],
      searchQuery: '',
      page: 1,
      pageSize: 10,
    };
  },
  computed: {
    filteredClassrooms() {
      const filtered = this.classrooms.filter(classroom =>
          classroom.name.includes(this.searchQuery)
      );
      return filtered.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
    },
    totalPages() {
      return Math.ceil(this.classrooms.length / this.pageSize);
    }
  },
  methods: {
    deleteClassroom(index) {
      this.classrooms.splice(index, 1);
    },
    nextPage() {
      if (this.page < this.totalPages) this.page++;
    },
    previousPage() {
      if (this.page > 1) this.page--;
    }
  }
};
</script>

<style scoped>
#app {
  display: flex;
}

.sidebar {
  width: 220px;
  background-color: #f4f4f4;
  padding: 20px;
}

.sidebar .logo {
  text-align: center;
  margin-bottom: 20px;
}

.sidebar .logo img {
  width: 50%;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #ddd;
}

.sidebar ul li:hover {
  background-color: #e9e9e9;
}

.main-content {
  flex: 1;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.search-input {
  padding: 8px;
  font-size: 16px;
  width: 250px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.create-room-button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.create-room-button:hover {
  background-color: #0056b3;
}

.table {
  width: 100%;
  border-collapse: collapse;
}

.table th, .table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

button {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
}
</style>
